<template>
    <mtable :options="options" :data="data">
        <template #date="{ scope }">
            <div style="{display: flex; align-items: center}" class="tableTest">
                <el-icon-timer></el-icon-timer>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </div>
        </template>
        <template #action="{ scope }">
            <el-button type="primary" size="small" @click="edit(scope)">编辑</el-button>
            <el-button type="danger" size="small" @click="edit(scope)">删除</el-button>
        </template>
    </mtable>
</template>
  
<script lang="ts" setup>
import { TableOptions } from "../../components/table/src/type"
let data = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
let options: TableOptions[] = [
    {
        label: '日期',
        prop: 'date',
        align: "center",
        slot: "date"
    },
    {
        label: '姓名',
        prop: 'name',
        align: "center",
    },
    {
        label: '地址',
        prop: 'address',
        align: "center",
    },
    {
        label: '操作',
        align: "center",
        action: true
    }
]
let edit = (scope) => {
    console.log(scope)
}
// let delete=()=>{

// }
</script>
<style lang="scss" scoped>
svg{
    width: 1em;
    height: 1em;
}
</style>
  